<template>
    <div class="home-swiper">
        <div class="swiper-container banner-container">
            <div class="swiper-wrapper">
                <div v-for="item in sl" class="swiper-slide" :style="{backgroundImage: 'url('+item.imgUrl+')'}"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination-white"></div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper'
    // import Swiper, { Navigation, Pagination } from 'swiper'
    // Swiper.use([Navigation, Pagination])
    export default {
        name: "HomeSwiper",
        props: ['sl'],
        mounted() {
            var swiper = new Swiper('.banner-container', {
                effect: 'fade',
                autoplay:true,
                loop : true,
                pagination: {
                    el: '.swiper-pagination'
                },
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true//修改swiper的父元素时，自动初始化swiper
            })
        }
    }
</script>

<style scoped>
    .home-swiper {
        margin-top: 50px;
    }
    .swiper-container {
        width: 100%;
        height: 120px;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
    }
</style>
